<template>
    <div class="login-page">
        <div class="login-form">
            <div class="form">
                <div class="text">
                    忘记密码
                </div>
                <el-form label-width="0px" :model="forgetForm" style="margin-top:20px" :rules="rules" ref="forgetForm">
                    <el-form-item label="" prop="phone">
                        <el-input v-model="forgetForm.phone"  autofocus placeholder="手机号" style="width:340px"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="smsCode">
                        <el-input v-model="forgetForm.smsCode"  placeholder="验证码" style="width:220px"></el-input>
                        <el-button type="text" style="width:120px;display: inline-block;font-size:14px;color:#5c8eff;text-align: center;cursor: pointer" @click="handleSendLoginSMSCode" :disabled="sendCode">{{verifyCodeText}}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="next" :loading="btnLoading">下一步</el-button>
                        <el-link type="info" style="margin-left:10px;line-height: 20px" @click="toLogin">登录</el-link>
                    </el-form-item>
                </el-form>
            </div>
            <div class="bg-img">
                <img src="../static/img/bgimgG.png"/>
            </div>
        </div>
        <login-bottom></login-bottom>
    </div>
</template>

<script>
    import {validatePhone} from '@/utils/validate';
    import loginBottom from '@/components/loginBottom';
  export default {
    name: 'forgetPassword',
    components: { loginBottom },
    data() {
        const isvalidatePhone = (rule, value, callback) => {
            if(!validatePhone(value)){
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        };
      return {
          forgetForm:{
              phone:'',
              smsCode:''
          },
          rules:{
              phone: [{ required: true, trigger: 'blur',validator: isvalidatePhone },],
              smsCode: [{ required: true, trigger: 'blur',message: '请输入验证码'},],

          },
          code:'',
          btnLoading:false,
          falg: false, //是否倒计时
          reciprocalTime : null,//倒计时函数
          sendCode:false,//是否能发送验证码
          verifyCodeText:'发送验证码',
          timer: 120,//倒计时秒数
      }
    },
    methods: {
        //去登录页
        toLogin(){
            this.$router.push({name:"login"});
        },
        /**
         * 发送验证码
         */
        handleSendLoginSMSCode(){
            this.$refs.forgetForm.validateField('phone',(valid) => {
                console.log(valid)
                if(!valid){
                    this.sendCode = true;
                    this.showCountDown();
                    //todo 发送验证码
                    //  sendFindPasswordSMSCode({mobile:this.forgetForm.phone}).then(()=>{
                    //      this.$message({
                    //          message: '验证码已发送',
                    //          type: 'success',
                    //          duration: 1000
                    //      });
                    //      this.showCountDown();
                    //  }).catch(()=>{
                    //      this.sendCode = false;
                    //  })
                }

            });


        },

        /**
         * 倒计时
         * @return null
         */
        showCountDown () {
            this.verifyCodeText = this.timer + '秒后重新获取';
            this.falg = true;
            let self = this;
            self.reciprocalTime = function(time){
                //@ts-ignore : js setTimeout
                setTimeout(function(){
                    if(time >=1 && self.falg){
                        time--;
                        self.verifyCodeText=time + '秒后重新获取';
                        self.reciprocalTime(time);
                    }else{

                        self.verifyCodeText='获取短信验证码';
                        self.sendCode = false;
                        //@ts-ignore : js clearTimeout
                        clearTimeout(self.reciprocalTime);
                    }
                },1000);
            };
            self.reciprocalTime(this.timer);
        },
        //下一步
        next(){
            this.$refs['forgetForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true;
                    //todo 调用验证手机号接口
                    this.$router.push({name:"editPassword"});

                }
            });

        },
    },
    created() {


    }
  }
</script>
<style lang="less">

</style>


